<template>
  <div>
    <p>{{ msg }}</p>
    <button @click="clickMe">点击我</button>
  </div>
</template>

<script>
import myExtends from "../../extends/myExtends";
export default {
  name: "ExtendsDemo",
  extends: myExtends,
  // data数据合并：冲突时，优先使用组件内的data
  data() {
    return {
      msg: "组件内的msg"
    };
  },
  beforeCreate() {
    console.log("组件内的beforeCreate函数");
  },
  // 钩子函数合并：先执行mixins中的created钩子函数，然后再执行组件内的created
  created() {
    console.log("组件内的created函数");
  },
  beforeMount() {
    console.log("组件内的beforeMount函数");
  },
  // 钩子函数合并：先执行mixins中的mounted钩子函数，然后再执行组件内的mounted
  mounted() {
    console.log("组件内的mounted函数");
  },
  // methods函数合并：先执行组件内的methods函数，然后再执行mixins中的methods函数
  methods: {
    clickMe: function() {
      alert("组件中的点击事件");
    }
  }
};
</script>

<style scoped></style>
